﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app" style="padding-right: 40px; padding-left: 40px; padding-bottom: 50px;">
    <!--主窗口-->
   
            <el-card style="padding-right: 20px; padding-left: 20px; padding-bottom: 40px;" header="订单管理">
                <el-row>
                    <el-col :xs="24" :md="12">
                        <el-input placeholder="请输入条件" v-model="keyword" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"  @click="query"></el-button>
                          </el-input>
                    </el-col>
                    <el-col style="left: 0px; padding-left: 20px;" :xs="24" :md="12" v-if="true">
                        <el-button @click="showAdd()">添加</el-button>
                    </el-col>
                </el-row>
                <el-table style="top: 20px;" :data="Orders" :fit="true" :show-header="true">
                    <el-table-column prop="OrderId" label="Id">
                    </el-table-column>
                    <el-table-column prop="RecPerson" label="收货人">
                    </el-table-column>
                    <el-table-column prop="RecAddress" label="收货地址">
                    </el-table-column>
                    <el-table-column prop="Time" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="Sum" label="订单金额">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="200px">
                        <template slot-scope="scope">
                            <el-button mc-type="column-el-button" size="mini" type="primary" @click="showEdit(scope.row)">编辑</el-button>
                            <el-button mc-type="column-el-button" size="mini" type="danger" @click="deleteTodo(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
    

    <!--修改事项对话框-->
    <el-dialog title="添加订单" :visible.async="dialogVisible" width="30%" @close="dialogVisible=false">
        <el-form label-width="50px">
            <el-form-item label="OrderId">
                <el-input type="number" v-model.number="currentTodo.id" placeholder="请输入内容">
                </el-input>
            </el-form-item>
            <el-form-item label="事项">
                <el-input v-model="currentTodo.name" placeholder="请输入内容">
                </el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="currentTodo.isComplete" 
                active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                <span v-show="currentTodo.isComplete">已完成</span>
                <span v-show="!currentTodo.isComplete">未完成</span>
            </el-form-item>
            <el-form-item style="text-align: right;">
                <el-button @click="dialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="saveTodo()">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</body>
  <!-- import Vue and element-ui -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- import Axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>
    var vue=new Vue({
        el: '#app',
        data:{
            keyword:"",
            todos: [], //查询结果
            currentTodo:{}, //当前编辑的事项
            dialogVisible: false, //对话框是否显示
            editMode:false  //当前是否是编辑模式（还是添加模式）
        },
        methods: { 
            query: function (keyword) {
                var path='/api/todo';
                if(this.keyword!="") path=path+"?name="+this.keyword;
                var self = this
                axios.get(path)
                    .then(response=>self.todos = response.data)
                    .catch(e =>self.$message.error(e.response.data))
            },
            deleteTodo: function (todo) {
                var self = this
                axios.delete('/api/todo/'+todo.id)
                    .then(response=>self.query())
                    .catch(e =>self.$message.error(e.response.data))
            },
            showEdit:function(todo){
                this.dialogVisible = true
                this.editMode=true;
                this.currentTodo = Object.assign({},todo)
            },
            showAdd:function(todo){
                this.dialogVisible = true
                this.editMode=false;
                this.currentTodo = {isComplete:false}
            },
            saveTodo:function(){
                var self = this
                if(self.editMode){
                    axios.put('/api/todo/'+self.currentTodo.id,self.currentTodo)
                    .then(response=> self.query())
                    .catch(e =>self.$message.error(e.response.data))
                }else{
                    axios.post('/api/todo',self.currentTodo)
                    .then(response=> self.query())
                    .catch(e => self.$message.error(e.response.data))
                }
                this.dialogVisible = false
            }
        }
    })
    vue.query();
  </script>
</html>